<template>
  <div class="m-account">
    <!-- 总资产 -->
    <div class="m-account-all">
      <div class="m-all-item">
        <span class="title">总资产</span>
        <br>
        <span class="all">0.00</span>
      </div>
      <div class="m-all-item">
        <div class="btn-option" style="margin-bottom: 16px;">
          <w-button type="main" @on-click="jumpPage('push')">充值</w-button>
        </div>
        <div class="btn-option">
          <w-button type="primary" @on-click="jumpPage('pull')">提现</w-button>
        </div>
      </div>
      <div class="m-all-item">
        <span class="title">冻结金额(元)</span>
        <br>
        <span class="other">0.00</span>
      </div>
      <div class="m-all-item">
        <span class="title">可用金额(元)</span>
        <br>
        <span class="other">0.00</span>
      </div>
    </div>
    <!-- 资金明细 -->
    <div class="capital-info">
      <w-tab-select :options="options" @on-change="_changeSelected">
        <!-- 查询条件 -->
        <div class="m-search-options">
          <div class="m-search">
            <div class="item">
              <span class="title">查询类型：</span>
              <div class="m-input">
                <w-select></w-select>
              </div>
            </div>
            <div class="item">
              <span class="title">查询时间：</span>
              <div class="m-input">
                <div>
                  <w-datepicker></w-datepicker>
                </div>
                -
                <div>
                  <w-datepicker></w-datepicker>
                </div>
              </div>
            </div>
            <div class="m-search-btn">
              <w-button type="main">查询</w-button>
            </div>
          </div>

          <!-- 列表信息 -->
          <div class="m-table-list">
            <w-table :columns="columns()">
              <!-- 交易明细 -->
              <!-- 充值记录 -->
              <tr v-if="curIndexSelected == 1">
                <td>
                  <span>2018-09-12 10:42:38</span>
                </td>
                <td>
                  <span>80000.00</span>
                </td>
                <td>
                  <span>浙江农商行</span>
                </td>
                <td>
                  <span>62228211920001821603</span>
                </td>
                <td>
                  <span class="success">成功</span>
                </td>
              </tr>
              <!-- 提现记录 -->
              <tr v-if="curIndexSelected == 2">
                <td>
                  <span>2018-09-12 10:42:38</span>
                </td>
                <td>
                  <span>80000.00</span>
                </td>
                <td>
                  <span>浙江农商行</span>
                </td>
                <td>
                  <span>62228211920001821603</span>
                </td>
                <td>
                  <span class="fail">失败</span>
                </td>
              </tr>
            </w-table>
          </div>
        </div>
      </w-tab-select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          'label': '交易明细',
          'value': '交易明细'
        },
        {
          'label': '充值记录',
          'value': '充值记录'
        },
        {
          'label': '提现记录',
          'value': '提现记录'
        }
      ],
      curIndexSelected: 0
    }
  },
  methods: {
    /**
     * 跳转
     */
    jumpPage(type) {
      this.$toast('该功能暂未开放...')
      return
      if (type == 'push') {
        this.$router.push('/my/recharge/push')
      } else if (type == 'pull') {
        this.$router.push('/my/recharge/pull')
      }
    },
    /**
     * 切换当前选项卡
     */
    _changeSelected(index) {
      if (index >= 1) {
        this.$toast('该功能暂未开放...')
        return
      }
      this.curIndexSelected = index
    },
    /**
     * 根据当前选中的选项卡，展示table列
     */
    columns() {
      if (this.curIndexSelected == 1) {
        // 充值记录
        return [
          {title: '充值时间', width: 'auto'},
          {title: '充值金额', width: 'auto'},
          {title: '开户银行', width: 'auto'},
          {title: '银行卡号', width: 'auto'},
          {title: '状态', width: 'auto'}
        ]
      } else if (this.curIndexSelected == 2) {
        // 提现记录
        return [
          {title: '提现时间', width: 'auto'},
          {title: '提现金额', width: 'auto'},
          {title: '开户银行', width: 'auto'},
          {title: '银行卡号', width: 'auto'},
          {title: '状态', width: 'auto'}
        ]
      }
      // 交易明细
      return [
        {title: '交易时间', width: 'auto'},
        {title: '产品名称', width: 'auto'},
        {title: '投资金额', width: 'auto'},
        {title: '年化利率', width: 'auto'},
        {title: '到期时间', width: 'auto'},
        {title: '收益', width: 'auto'}
      ]
    }
  }
}
</script>

<style lang="scss">
.m-account-all {
  .btn-option {
    .btn {
      width: 60px;
      height: 30px;
    }
  }
}
.m-search-options {
  .m-search {
    .form-control {
      width: 180px;
      height: 30px;
    }
  }
  .m-search-btn {
    display: inline-block;
    .btn {
      width: 60px;
      height: 30px;
    }
  }
}
.m-table-list {
  table {
    th {
      height: 34px !important;
      background-color: #FAFAFA;
      border-bottom: none !important
    }
  }
}
</style>

<style lang="scss" scoped>
.m-title {
  font-size: 16px;
  margin: 20px 0; 
  font-weight: bold;
}
.m-account-all {
  position: relative;
  width: 990px;
  margin: -20px -20px 0;
  height: 152px;
  padding: 34px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../assets/my/my_bg_1.png) no-repeat;
  .m-all-item {
    flex: 1;
    span {
      position: absolute;
      display: inline-block;
    }
    .title {
      top: 34px;
      font-size: 16px;
    }
    .all {
      bottom: 34px;
      font-size: 32px;
    }
    .other {
      bottom: 34px;
      font-size: 24px;
    }
  }
}
.m-search {
  .item {
    display: inline-block;
    margin-right: 30px;
    .title {
      font-size: 12px;
      display: inline-block;
    }
    .m-input {
      display: inline-block;
      & > div {
        display: inline-block;
      }
    }
  }
}
.m-table-list {
  margin-top: 20px;
  .success {
    color: #14AA9D
  }
  .fail {
    color: #ED1921
  }
}
</style>
